<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import {
  NButton,
  NIcon,
  NCheckbox,
  NRadioButton,
  NRadioGroup,
  useDialog
} from 'naive-ui'
import {
  ReloadCircleOutline as LoadIcon,
  CloseCircleOutline as CloseIcon
} from '@vicons/ionicons5'
import DataService from './service/data.service'
import Snap from 'snapsvg'

const dialog = useDialog()
// eslint-disable-next-line no-eval
const ipcRender = eval('require("electron").ipcRenderer') as Any
const dataService = new DataService()
const artboard = reactive({
  minX: 0,
  maxX: 0,
  minY: 0,
  maxY: 0,
  width: 0,
  height: 0
})
const root = ref(null as unknown as Snap.Paper)
const zoom = ref(1)
const drawType = ref(0)
const showDivder = ref(false)
watch(drawType, () => {
  root.value.children()[1 - drawType.value].attr({ opacity: '0' })
  root.value.children()[drawType.value].attr({ opacity: '1' })
})

function resize () {
  const { width, height } = { width: window.innerWidth, height: window.innerHeight }
  const scale = Math.min((width - 30) / artboard.width, (height - 72) / artboard.height) * zoom.value
  root.value?.attr({
    transform: `translate(${-(artboard.minX + artboard.maxX) / 2 * scale + width / 2}, ${-(artboard.minY + artboard.maxY) / 2 * scale + height / 2 + 20}) scale(${scale})`
  })
}
window.onresize = () => resize()
function onWheel (evt: Any) {
  zoom.value *= (1 + evt.wheelDelta / 900)
  zoom.value = Math.max(1, Math.min(2.5, zoom.value))
  resize()
}

async function onLoad (force = false) {
  const datas = await ipcRender?.invoke('get-xls', force)
  dataService.setDatas(JSON.parse(datas) || [])

  artboard.minX = Math.min(...dataService.datas.map(v => v[0]).flat())
  artboard.maxX = Math.max(...dataService.datas.map(v => v[0]).flat())
  artboard.minY = Math.min(...dataService.datas.map(v => v[1]).flat())
  artboard.maxY = Math.max(...dataService.datas.map(v => v[1]).flat())
  artboard.width = artboard.maxX - artboard.minX
  artboard.height = artboard.maxY - artboard.minY
  const snap = (window as Any).Snap('#svg-root')
  snap.clear()
  root.value = snap.g()
  resize()
  dataService.draw(root.value.g() as Any)
  dataService.draw(root.value.g() as Any, 1)
  root.value.children()[1].attr({ opacity: '0' })
}
onLoad()

function onExit () {
  dialog.warning({
    title: '警告',
    content: '确定退出应用?',
    positiveText: '确定',
    negativeText: '取消',
    closable: false,
    maskClosable: false,
    closeOnEsc: false,
    style: 'width: 260px',
    onPositiveClick () {
      ipcRender?.send('exit')
    }
  })
}

</script>

<template>
  <div class="rls" @wheel="onWheel">
    <div class="header">
      <n-radio-group v-model:value="drawType" size="small">
        <n-radio-button :value="0">向量</n-radio-button>
        <n-radio-button :value="1">分量</n-radio-button>
      </n-radio-group>
      <n-checkbox v-model:checked="showDivder" size="large">
        分水岭
      </n-checkbox>
      <n-button text @click="onLoad(true)">
        <template #icon>
          <n-icon size="26"><load-icon /></n-icon>
        </template>
      </n-button>
      <n-button text @click="onExit" type="error">
        <template #icon>
          <n-icon size="26"><close-icon /></n-icon>
        </template>
      </n-button>
    </div>
    <svg id="svg-root"></svg>
  </div>
</template>

<style scoped lang="less">
.rls {
  width: 100vw;
  height: 100vh;
  .header {
    -webkit-app-region: drag;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    padding: 0 15px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    button {
      margin-left: 8px;
      -webkit-app-region: none;
    }
    .n-radio-group {
      -webkit-app-region: none;
    }
    .n-checkbox {
      margin-right: 12px;
      margin-left: 8px;
      -webkit-app-region: none;
    }
  }
  #svg-root {
    width: 100%;
    height: 100%;

    :deep(g) {
      // circle {
      //   fill: var(--text-color-1);
      //   stroke: var(--text-color-1);
      // }
      // line {
      //   stroke: var(--primary-color);
      // }
    }
  }
}
</style>
